<template>
    <div>
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">单据信息</div>
            <el-row type="flex">
                <el-col class="flex" :span="8">
                    <div class="title">单号：</div>
                    <div class="">{{ info.sn }}</div> 
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">关联业务单号：</div>
                    <router-link
                        v-perms="['cooperation.cooperation/detail']"
                        :to="{path: getRoutePath('cooperation.cooperation/detail'), query: {id: info.cooperation.id}}"
                    >
                        <el-link type="primary" :underline="false">{{ info.cooperation.sn }}</el-link>
                    </router-link>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">创建时间：</div>
                    <div class="">{{ info.create_time }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">收款人：</div>
                    <div>{{ info.user.real_name }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">手机号：</div>
                    <div>{{ info.user.account }}</div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 款项信息-渠道费 -->
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">款项信息</div>
            <div class="w-6/12">
                <el-table :data="[{
                    actual_money: info.actual_money
                }]">
                    <el-table-column label="序号" type="index" min-width="120"></el-table-column>
                    <el-table-column label="款项类型" prop="is_separate" min-width="120">
                        <template #default="{ row }">
                            <span>渠道费</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额（元）" prop="actual_money" min-width="180" />
                    <el-table-column label="备注" prop="" min-width="180" ></el-table-column>
                </el-table>
                <div class="pt-4 pl-32">
                    <span>总金额</span>
                    <span class="ml-16">{{ info.actual_money }} 元</span>
                </div>
            </div>
        </el-card>

        <!-- 优惠信息 -->
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">退积分</div>
            <div class="w-8/12">
                <el-table :data="[{
                    use_integral: info.use_integral,
                    deduction_price: info.deduction_price,
                    sn: info.integralData.sn ? info.integralData.sn : '',
                    use_integral_desc: info.use_integral_desc
                }]">
                    <el-table-column label="积分数量" prop="use_integral" min-width="120"/>
                    <el-table-column label="抵扣金额（元）" prop="deduction_price" min-width="180"></el-table-column>
                    <el-table-column label="交易流水号" prop="sn" min-width="180">
                        <template #default="{ row }">
                            <router-link
                                v-if="row.sn"
                                v-perms="['user.integral/integralList']"
                                :to="{path: getRoutePath('user.integral/integralList'), query: {sn: row.sn}}"
                            >
                                <el-link type="primary" :underline="false">{{ row.sn }}</el-link>
                            </router-link>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="use_integral_desc" min-width="180" ></el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 单个或组合支付支付信息 -->
        <el-card  class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">退现金 <span v-if="info.mode != 1" class="font-normal text-sm ml-2">实退金额（元）：{{ info.refund_amount }}</span></div>

            <div class="mb-4">
                <el-table :data="pay_data">
                    <el-table-column label="退款方式" prop="refund_type" min-width="180">
                        <template #default="{ row }">
                            <span v-if="row.refund_type == 1">微信</span>
                            <span v-if="row.refund_type == 2">支付宝</span>
                            <span v-if="row.refund_type == 3">对公（用不到了）</span>
                            <span v-if="row.refund_type == 4">余额</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="支付状态" prop="use_money_status" min-width="180">
                        <template #default="{ row }">
                            <span v-if="row.use_money_status == 0">未退款</span>
						    <span v-if="row.use_money_status == 1">已退款</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="实退金额（元）" prop="refund_amount" min-width="120"></el-table-column>
                    <el-table-column label="交易流水号" prop="moneyData" min-width="160">
                        <template #default="{ row }">
                            <span>{{ row.moneyData?.sn? row.moneyData?.sn: '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="交易时间" prop="refund_time" min-width="180">
                        <template #default="{ row }">
                            <span>{{ row.refund_time? row.refund_time: '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="" min-width="180" ></el-table-column>
                    <el-table-column label="操作" prop="name" min-width="120" fixed="right">
                        <!-- <template #default="{ row }">
                            <el-button v-if="row.use_money_status == 3 && row.refund_type != 4" v-perms="['seat.seatOrder/authOrder']" type="primary" link class="mr-2.5" @click="handleSure(row)">到账确认</el-button>
                        </template> -->
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-dialog
            v-model="showCompany"
            title="到账确认"
            width="500"
        >
            <div class="flex">
                <el-icon size="20" color="#E6A23C"><Warning /></el-icon>
                <div>请认真核对银行流水，确认租金是否已到账</div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showCompany = false">取消</el-button>
                    <el-button type="danger" v-perms="['setting.pay.payConfig/unPay']" @click="notReceived">未到账</el-button>
                    <el-button type="primary" v-perms="['setting.pay.payConfig/paid']" @click="alreadyReceived">已到账</el-button>
                </div>
            </template>
        </el-dialog>
        <pay v-model:show="checkState.show" @confirm="handlePaidConfirm"></pay>
    </div>
</template>
<script lang="ts" setup name="channelDetail">
import { commissionRefundDetail, unPay, paid } from '@/api/finance';
import pay from '../receipt/pay.vue';
import feedback from '@/utils/feedback';
import {getRoutePath} from '@/router'

const route = useRoute();
const checkState = reactive({
    show: false
})
const showCompany = ref(false)
const orderInfo:any = ref({})
const handleSure = async (id : number) => {
    showCompany.value = true;
    orderInfo.value = id;
}

const payTxt = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '待支付';break;
            case 2: txt = '支付中';break;
            case 3: txt = '等待确认（对公）';break;
            case 4: txt = '支付成功 ';break;
            case 5: txt = '支付失败 ';break;
            case 6: txt = '已作废 ';break;
        }
        return txt;
    })
}

//未到账
const notReceived = async () => {
    try{
        showCompany.value = false;
        await feedback.confirm('确认未到账之后单据状态将变“支付失败”且不可更改，请认真核对银行流水，及时与付款人进行联系确认，谨慎操作。是否继续确认未到账？','未到账','none');
        await unPay({ id: orderInfo.value.id })
        // getLists();
    }catch(error){
        console.log(error)
    }
}
//已到账
const alreadyReceived = () => {
    showCompany.value = false;
    checkState.show = true;
}
const handlePaidConfirm = async (value : any) => {
    await paid({ 
        id: orderInfo.value.id, 
        send_pay_name: value.send_pay_name, 
        send_pay_account: value.send_pay_account, 
        refund_time: value.refund_time 
    });
    showCompany.value = false;
    checkState.show = false;
    // getLists();
}

const info:any = ref({
    user: {
        real_name: '',
        account: ''
    },
    channelExtra: {
        real_name: '',
        account: ''
    },
    cooperation: {
        sn: ''
    },
    integralData: {
        sn: ''
    },
    moneyData: { // 钱包的支付订单号
        sn: ''
    },
    fenzhang: [], // 分账的两个交易流水号
})
const getDetails = async () => {
    const data = await commissionRefundDetail({
        id: route.query.id
    })
    console.log(data)
    info.value = data
    pay_data.value = [
        {
            id: info.value.id,
           
            use_money_status: info.value.use_money_status,
            refund_type: info.value.refund_type,
            
            refund_time: info.value.refund_time,
            moneyData: info.value.moneyData,
            refund_amount: info.value.refund_amount
        }
    ]
    console.log(info.value.use_money_status)
    console.log(pay_data.value)
}
const pay_data:any = ref([])
route.query.id && getDetails()
</script>
<style scoped lang="scss">
.flex{
    display: flex;
    height: 40px;
}
.title{
    color: #ccc;
}
</style>